<template>
  <view class="wrap">
    <image class="w-full" mode="widthFix" src="https://qn.ebaozu.cn/public/mini/zeroVip/%E5%A4%B4%E9%83%A8%E8%83%8C%E6%99%AF.png"></image>
    <view class="list-box">
      <view class="item"
            :class="{'highlight': checkItem.id == item.id }"
            @click="changeCheck(item)"
            :style="{
              backgroundImage: 'url(' + item.back_img + ')',
              backgroundSize: 'cover',
              color: item.color
            }"
            v-for="(item,index) in vipList" :key="index">
        <view class="check-box">
          <text class="iconfont icon-a-ic_CompleteSelect font-num" v-if="checkItem.id==item.id"></text>
          <text class="iconfont icon-ic_unselect text--w111-ccc" v-else></text>
          <text class="text--w111-fff">{{checkItem.id==item.id?'已选':'未选'}}</text>
        </view>
        <view class="l">
          <view class="name">
            {{item.title}}
          </view>
          <view class="tip">
            {{item.product_count}}款包包0元随心租
          </view>
          <view class="price">
            ￥{{item.price}} <text class="year">/年</text>
          </view>
        </view>
        <view class="r">
          <image class="logo" :src="item.logo" mode="widthFix"></image>
        </view>
      </view>
    </view>

    <view class="bottom-btn">
      <view class="agree flex-y-center">
        <view @click="agree=!agree" class="flex-y-center">
          <text class="iconfont icon-a-ic_CompleteSelect" v-if="agree"></text>
          <text class="iconfont icon-ic_unselect text--w111-ccc" v-else></text>
          <text class="text--w111-fff" style="opacity: 0.6">我已阅读并同意</text>
        </view>
        <text @click="goAgreement" class="">《会员购买协议》</text>
      </view>
      <view class="save-btn" @click="buyVip">
        <image class="btn-bg" src="https://qn.ebaozu.cn/public/mini/zeroVip/%E6%94%AF%E4%BB%98%E6%8C%89%E9%92%AE.png" mode="widthFix"></image>
        <view class="txt">
          <text class="fs-36">￥{{checkItem.price}}</text>
          <text class="fs-26 ml-20">立即开通超级会员卡</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {buyZeroVip, getZeroVipList} from "@/api/leaseOrder";
import {getUserInfo} from "@/api/user";

export default {
  data() {
    return {
      vipList:[],
      agree:false,
      checkItem:'',
    }
  },
  computed:{

  },
  watch: {

  },
  onShow() {
    this.getUserInfo()
  },
  methods: {
    goAgreement(){
      uni.navigateTo({
        url: '/pages/users/zero_bag/agreement'
      })
    },
    // 获取会员id，跳转
    getUserInfo(){
      getUserInfo().then(res=>{
        // 有会员-跳转
        if(res.data.super_id>0){
          uni.redirectTo({
            url: '/pages/users/zero_bag/detail'
          })
        }else{
          this.getZeroList()
        }
      })
    },
    cardStyle(item){
      let style={
        backgroundImage: 'url(' + item.back_img + ')',
        backgroundSize: 'cover' ,
        color:item.color
      }
      return style
    },
    getZeroList() {
      getZeroVipList().then(res=>{
        this.vipList=res.data
        // 初始值
        if(!this.checkItem.id){
          this.vipList.forEach((item,index)=>{
            if(index==0){
              this.checkItem={...item}
            }
          })
        }
      })
    },
    changeCheck(item){
      this.checkItem= {...item}
    },
    buyVip(){
      if(!this.agree){
        uni.showToast({
          title: '请先阅读并同意会员协议',
          icon: 'none'
        })
        return
      }
      buyZeroVip({
        super_id:this.checkItem.id,
        quitUrl:'pages/users/zero_bag/index',
      }).then(res=>{
        if(res.status===200){
          let that=this
          if(res.data.status&&res.data.status==='ALIPAY_PAY'){
            let status = res.data.status,
                orderId = res.data.result.order_id || '',
                jsConfig = res.data.result.jsConfig;
            switch (status) {
              case 'ALIPAY_PAY':
                console.log('ALIPAY_PAY_MP-ALIPAY');
                uni.requestPayment({
                  provider: 'alipay',
                  orderInfo: jsConfig.tradeNo,
                  success: (e) => {
                    console.log(e)
                    if(e.resultCode=="6001"){

                    }else{
                      that.$util.Tips({ title: '支付成功' })
                    }
                  },
                  fail: (e) => {
                    console.log('ALIPAY_PAY_fail',e);
                    that.$util.Tips({ title: '支付失败' })
                  },
                  complete: () => {
                    that.getUserInfo()
                  },
                });
                break;
            }
          } else{
            that.$util.Tips({ title: res.msg })
          }
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.wrap{
  height: 100vh;
  overflow-y: auto;
  background: #1e1e1e;
  padding-bottom: 200rpx;
}
@keyframes shine {
  from {
    left: -50%;
  }
  to {
    left: 100%;
  }
}
.list-box{
  padding: 50rpx 30rpx;
  position: relative;
  z-index: 1;
  margin-top: -80rpx;
  .item {
    position: relative;
    width: 100%;
    height: 330rpx; /* 或根据需要设置高度 */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 30rpx;
    margin-bottom: 50rpx;
    background-color: #000;
    display: flex;
    justify-content: space-between;

    //高亮效果
    overflow: hidden;
    &.highlight::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200rpx;
      background: linear-gradient(
              transparent 25%,
              rgba(255, 255, 255, 0.5),
              transparent 75%
      );
      transform: rotate(-45deg);
      animation: shine 2s infinite ease-in-out;
      pointer-events: none;
    }
    .check-box{
      position: absolute;
      left: 0;
      top: 0;
      width: 130rpx;
      height: 42rpx;
      background-color: rgba(145, 145, 145, 0.5);
      border-top-left-radius: 30rpx;
      border-bottom-right-radius: 30rpx;
      font-size: 22rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      .iconfont{
        margin-right: 10rpx;
        font-size: 26rpx;
      }
    }
    .l{
      flex: 1;
      padding-top: 80rpx;
      padding-left: 50rpx;
      .name{
        font-size: 38rpx;
        font-weight: bold;
        font-style: italic;
        margin-bottom: 10rpx;
      }
      .tip{
        font-size: 24rpx;
        margin-bottom: 46rpx;
      }
      .price{
        font-size: 36rpx;
        .year{
          font-size: 22rpx;
        }
      }
    }
    .r{
      padding-top: 20rpx;
      padding-right: 20rpx;
      .logo{
        width: 200rpx;
      }
    }
  }
}
.bottom-btn{
  position: fixed;
  left: 0;
  bottom: 0;
  z-index:999;
  padding:20rpx 20rpx 30rpx;
  background-color: #1e1e1e;
  width: 100%;
  .agree{
    color: #f7d8ab;
    font-size: 22rpx;
    padding:0 20rpx 24rpx;
    .iconfont{
      font-size: 24rpx;
      margin-right: 10rpx;
    }
  }
  .save-btn {
    position: relative;
    width: 100%;
    height: 100rpx; /* 根据 btn-bg 图片高度设定 */
    .btn-bg {
      width: 100%;
      height: 100rpx;
      display: block;
    }
    .txt {
      position: absolute;
      left: 50%;
      top: 46%;
      transform: translate(-50%, -50%);
      z-index: 10;
      color: #411b01;
      font-size: 32rpx;
      text-align: center;
      width: 100%;
    }
  }
}
</style>